<template>
    <Layout style="height: 100%;width: 100%">
        <Sider class="side-bar" :width="250">
            <XComponentMenu></XComponentMenu>
        </Sider>
        <Content style="position: relative;">

            <Row class="main-content" type="flex" justify="center" align="middle">
                <Col :span="preview ? 12 : 24" class="form-area">
                    <IntroductionText icon="ios-paper-outline" justify="center">
                        表单设计
                    </IntroductionText>
                    <draggable
                            class="drop-area form"
                            :list="createdRules"
                            group="template"
                            tag="ul"
                            handle=".drag-handle"
                            v-bind="dragOptions"
                    >
                        <transition-group type="transition">
                            <ul
                                    :class="{
                                        'form-item':true,
                                        'form-item-selected': editElement && (element.field === editElement.field)
                                    }"

                                    v-for="element of createdRules"
                                    :key="element.id"
                            >
                                <XFormItem
                                        :element="element"
                                        :ref="`form-item-${element.field}`"
                                        @delete-form-item="deleteFormItem"
                                        @edit-form-item="editFormItem"
                                        @change-form-item="saveFormItem"
                                >
                                </XFormItem>
                            </ul>
                        </transition-group>
                    </draggable>
                </Col>

                <Col :span="12" class="form-area" v-show="preview">
                    <IntroductionText icon="md-tablet-portrait" justify="center">
                        实际表单
                    </IntroductionText>
                    <XFormPreview
                            ref="form-preview"
                            :created-rules.sync="createdRules"
                    ></XFormPreview>
                </Col>
            </Row>
            <ButtonGroup style="position: absolute;top: 30px;right: 30px">
                <Button
                        @click="preview = !preview"
                        color="success"
                        shape="circle"
                        size="large"
                >
                    {{ preview ? '关闭预览' : '启用预览' }}
                </Button>
                <Button
                        @click="displayModel"
                        color="success"
                        shape="circle"
                        size="large"
                >
                    显示数据
                </Button>
            </ButtonGroup>
        </Content>

        <Modal v-model="display" scrollable width="65vw">
            <JSONDisplay title="数据" :value="model"></JSONDisplay>
        </Modal>
    </Layout>
</template>

<script>
  import draggable from 'vuedraggable'
  import XFormItem from '@/components/form/XFormItem'
  import TypeMixin from '@/components/form/TypedTemplateMixin'
  import IntroductionText from '@/components/form/native/IntroductionText'
  import XComponentMenu from '@/components/form/XComponentMenu'
  import JSONDisplay from '@/components/display/JSONDisplay'
  import XFormPreview from '@/components/form/XFormPreview'

  export default {
    name: 'XFormDesigner',
    components: {
      XFormPreview,
      JSONDisplay,
      XComponentMenu,
      IntroductionText,
      draggable,
      XFormItem,
    },
    mixins: [TypeMixin],
    data: function () {
      return {
        createdRules: [],
        preview: true,
        display: false,
        model: {},
        editElement: undefined,
      }
    },

    mounted () {
      this.templateList.forEach(e => {
        this.createdRules.push(this.cloneTemplate(e))
      })
    },
    methods: {
      uploadHandler: function (res, file, fileList) {
        if (res.status === '1') {
          console.info(res, file, fileList)
          file.url = res.data.filePath
          file.name = res.data.filePath
        } else {
          this.$Message.error({ content: res.text })
        }
      },
      deleteFormItem: function (element) {
        if (this.createdRules.length <= 1) {
          this.$Message.info({ content: '至少保留一项' })
          return
        }
        this.createdRules.splice(this.createdRules.indexOf(element), 1)
      },
      saveFormItem: function (element) {
        let find = this.createdRules.findIndex(e => e.id === element.id)
        if (find >= 0) {
          this.createdRules[find] = Object.assign(
            {},
            this.createdRules[find],
            element,
          )
          this.$refs['form-preview'].updateRule(
            element.field,
            this.createdRules[find],
          )
        } else {
          this.$Message.error({ content: '元素未匹配' })
        }
      },
      editFormItem: function (item) {
        this.editElement = item
      },

      displayModel: function () {
        this.model = this.$refs['form-preview'].getModel()
        this.display = true
      },
    },
  }
</script>

<style scoped>
    .side-bar {
        background-color: #ffffff;
        transition: 0.5s all;
        height: 100%;
    }

    .hide-bar {
        width: 0;
    }

    .show-bar {
        width: 350px;
    }

    /*定义滚动条高宽及背景
                     高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
        background-color: #f5f5f5;
    }

    /*定义滚动条轨道
                     内阴影+圆角*/
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 3px rgba(222, 222, 222, 0.6);
        border-radius: 3px;
        background-color: #f5f5f5;
    }

    /*定义滑块
                     内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #ccc;
    }

    .main-content {
        height: 100%;
        width: 100%;
    }

    .drop-area {
        /*height: 675px;*/
        /*width: 375px;*/
        padding: 12px 12px;
        /*border: 1px #333 dashed;*/
        overflow-y: auto;
        overflow-x: hidden;
        width: 292px;
        height: 480px;
        top: 73px;
        max-height: 480px;
        background: #fdfdfd;
        margin-top: 43px;
    }

    .form-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 490px;
        height: 670px;
        background: url() no-repeat top;
        background-size: 100% 100%;
    }

    #form-created {
        width: 294px;
        height: 480px;
        background: #fdfdfd;
        /*border: 1px #333 dashed;*/
        overflow-y: auto;
        margin-top: 43px;
        padding: 24px 16px;
    }

    .ghost {
        opacity: 0.5;
        background: #c8ebfb;
    }

    .form-item {
        cursor: move;
    }
    .form-item-selected {
        border: 1px #333 dashed;
        background-color: rgba(200, 235, 251, 0.33);
    }
</style>
